.span-block {
  display: inline-block;
  width: 100%;
  margin: 4px 0;
}
.fieldset-border{
  padding:12px;
  border:1px solid #ddd;
  border-radius:4px;
  .legend{
    padding:0 8px;
    font-size:14px;
    font-weight:bold;
  }
}
.tip {
  padding: 12px;
  font-size:14px;
  background-color: #ecf8ff;
  border-left: 5px solid #50bfff;
  border-radius: 4px;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999; 
  width: 100%;
  height: 100%;
  text-align:center;
  background-color: rgba(255, 255, 255, 0.6); 
}
.mr12{
  margin-right:12px !important;
}
.mr24{
  margin-right:24px !important;
}
.mr36{
  margin-right:36px !important;
}
.mr48{
  margin-right:48px !important;
}
.mr8{
  margin-right:8px !important;
}
.mr6{
  margin-right:6px !important;
}
.ml12{
  margin-left:12px !important;
}
.ml24{
  margin-left:24px !important;
}
.ml80{
  margin-left:80px !important;
}
.mt12{
  margin-top:12px !important;
}
.mt4{
  margin-top:4px !important;
}
.mt8{
  margin-top:8px !important;
}
.mb12{
  margin-bottom:12px !important;
}
.ml4{
  margin-left:4px !important;
}
.ml0{
  margin-left:0px !important;
}
.mr0{
  margin-right:0 !important;
}
.pr12{
  padding-right:12px !important;
}
.pl12{
  padding-left:12px !important;
}
.pl80{
  padding-left:80px;
}
.pl110{
  padding-left:110px;
}
.pt300{
  padding-top:300px !important;
}
.pd0{
  padding:0 !important;
}
.pb0{
  padding-bottom:0 !important;
}
.inline-block{
  display: inline-block;
}
.mlauto{
  margin-left:auto;
}
.mrauto{
  margin-right:auto;
}
.d-flex{
  display: flex;
}
.justify-content-center{
  justify-content:center;
}
.align-items-center{
  align-items: center;
}
.justify-content-center{
  justify-content: center;
}
.flex-column{
  flex-direction: column;
}
.flex-1{
  flex:1
}
.align-right{
  text-align:right;
}
.align-center{
  text-align:center;
}
.wd{
  &60{
    width:60px !important;
  }
  &80{
    width:80px !important;
  }
  &100{
    width:100px !important;
  }
  &120{
    width:120px !important;
  }
  &150{
    width:150px !important;
  }
  &200{
    width:200px !important;
  }
  &240{
    width:240px !important;
  }
  &260{
    width:260px !important;
  }
  &280{
    width:280px !important;
  }
  &300{
    width:300px !important;
  }
  &320{
    width:320px !important;
  }
  &360{
    width:360px !important;
  }
}

.h{
  &4{
    height:4px;
  }
  &6{
    height:6px;
  }
  &8{
    height:8px;
  }
  &10{
    height:10px;
  }
  &12{
    height:12px;
  }
  &14{
    height:14px;
  }
  &16{
    height:16px;
  }
  &18{
    height:18px;
  }
  &20{
    height:20px;
  }
  &22{
    height:22px;
  }
  &24{
    height:24px;
  }
  &28{
    height:28px;
  }
  &32{
    height:32px;
  }
}

.font{
  &12{
    font-size:12px !important;
  }
  &14{
    font-size:14px !important;
  }
  &16{
    font-size:16px !important;
  }
  &18{
    font-size:18px !important;
  }
  &20{
    font-size:20px !important;
  }
  &22{
    font-size:22px !important;
  }
  &24{
    font-size:24px !important;
  }
  &32{
    font-size:32px !important;
  }
  &36{
    font-size:36px !important;
  }
}
.bg{
  &-primary{
    background:#1890ff !important;
  }
  &-primary-plain{
    background:#ecf5ff !important;
  }
  &-warning{
    background:#FFBA00 !important;
  }
  &-warning-plain{
    background:#fdf6ec !important;
  }
  &-danger{
    background:#ff4949 !important;
  }
  &-danger-plain{
    background:#fef0f0 !important;
  }
  &-success{
    background:#67c23a !important;
  }
  &-success-plain{
    background:#f0f9eb !important;
  }
  &-black{
    background:#000 !important;
  }
  &-black-plain{
    background:#f2f2f5 !important;
  }
  &-info{
    background:#999 !important;
  }
  &-info-plain{
    background:#f4f4f5 !important;
  }
}
.color{
  &-primary{
    color:#1890ff
  }
  &-info{
    color:#666
  }
  &-default{
    color:#999
  }
  &-black{
    color:#000
  }
  &-success{
    color:#67c23a
  }
  &-warning{
    color:#FFBA00
  }
  &-danger{
    color:#ff4949
  }
  &-white{
    color:#fff;
  }
}
.dot{
  width:8px;
  height:8px;
  border-radius:50%;
}
.line-through{
  text-decoration: line-through
}
.position-relative{
  position:relative;
}
.position-absolute{
  position:absolute;
}
.position-fixed{
  position:fixed;
}
.font-bold{
  font-weight: bold !important;
}
.flex-container{
  display:flex;
  margin:6px 12px;
  color:#666;
  dl{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content: center;
    margin-block-start:0;
    margin-block-end:0;
    dt{
      width:12px;
      height:12px;
      background:#13ce66;
      border-radius:50%;
    }
    dd{
      margin-inline-start: 8px;
      font-size:14px;
      font-weight:normal;
      color:#333;
    }
  }
}
.color-item{
  display:inline-block;
  width:12px;
  height:12px;
}
.color-dot{
  display: inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
}
.fixed-container {
  position: fixed;
  right: 32px;
  bottom: 22px;
  z-index: 9999;
}
.el-divider--horizontal {
  margin: 8px 0 24px 0 !important;
}
.el-main {
  padding-bottom: 0;
}

.ele-table-tool-default {
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 0;
  background-color: #fafafa;
  border: 1px solid #ededed;
  border-bottom: none;
}

.ele-table-tool-default-bottom{
  border-top: none;
  border-bottom: 1px solid #ededed;
}

.el-checkbox.is-bordered.el-checkbox--small{
  background:#fff;
}

.labelClass{
  width:100px;
  font-weight:bold !important;
  color:#333 !important;
  text-align: right;
}
.contentClass{
  width:120px;
}

.dialog-footer{
  margin:-30px 0 0 100px;
}

.el-input-group__append, .el-input-group__prepend{
  padding:0 10px !important;
}

.el-table th .cell{
  font-weight: bold !important;
}

.el-checkbox.is-bordered.el-checkbox--small{
  margin:4px 0;
}

.el-card-znzg{
  .el-card__header{
    padding:8px 8px 8px 12px !important;
  }
}

.goods-card-body {
  position: relative;
  padding: $base-padding;
  cursor: pointer;

  .goods-tag-group {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9;
    padding: $base-padding * 1.5;
  }

  .goods-button-group{
    position: absolute;
    top: 0;
    right: 0;
    bottom:0;
    left:0;
    z-index: 9;
    display:none;
    width:96px;
    height:36px;
    margin: auto;
  }

  &:hover{
    .goods-button-group{
      display:inline-block;
    }
  }
 

  .goods-image-group {
    height: 200px;
    overflow: hidden;
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);

    .goods-image {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 200px;

      .isSvg {
        padding: 100px;
      }

      i {
        font-size: 100px;
        color: $base-color-white;
      }

      transition: all ease-in-out 0.3s;

      &:hover {
        transform: scale(1.1);
      }
    }
  }

  .goods-title {
    margin: $base-margin 0 8px 0;
    overflow: hidden;
    font-size: 16px;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .goods-price {
    margin: 15px 0 0;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;

    s {
      color: #c5c8ce;
    }
  }

  .goods-description {
    display: -webkit-box;
    height: 45px;
    margin-top: $base-margin - 5px;
    overflow: hidden;
    font-size: 12px;
    line-height: 22px;
    color: #767676;
    text-overflow: ellipsis;
    box-orient: vertical;
    line-clamp: 2;
  }

  .goods-detail {
    float: left;
    margin-bottom: $base-margin - 9px;
  }
}

p {
  display: block;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

dd {
  display: block;
  margin-inline-start: 0;
}

.map-tools-container{
  padding:0 12px;
  background:rgba(255,255,255,.9);
  border-radius:4px;
  dl{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:12px 0;
    color:#666;
    cursor:pointer;
    border-bottom:1px solid #ddd;
    &:hover,&.active{
      color:#409EFF;
    }
    dt{
      font-size:18px;
    }
  }
}

.text-align{
  &-center{
    text-align: center;
  }
  &-left{
    text-align: left;
  }
  &-right{
    text-align: right;
  }
}

.full-height {
  height: calc(100vh - #{$base-nav-height} - #{$base-padding} * 4);
}

.childs-container{
  display:flex;
  flex-wrap: wrap;
  dl{
    position:relative;
    width:10%;
    padding:12px 0;
    text-align:center;
    cursor:pointer;
    &.selected, &.active{
      font-weight:bold;
      color:#409EFF;
    }
    dd{
      margin-inline-start: 0;
      font-size:14px;
      &.iconfont{
        position:absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        font-size:48px;
        color:#409EFF;
      }
    }
    img{
      width:32px;
    }
  }
}

.el-divider--horizontal{
  margin:24px 0 !important;
}